<template>
  <div>

    <el-form :model="form" style="width: 100%" :inline="true">
      <el-form-item label="日期:">
        <el-date-picker
          v-model="form.time"
          type="month"
          format="yyyy 年 MM 月"
          value-format="timestamp"
          placeholder="选择年月">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="身份证号:">
        <el-input
          placeholder="请输入查询身份证"
          oninput="this.value=this.value.replace(/([^0-9Xx])+/g,'');"
          v-model="form.name"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="selectMsg" style="float: left">查询</el-button>
        <el-upload
          class="upload-demo"
          :action="CONFIG.serverSrc+'/admin/pay/upload'"
          :data="{'time':form.time}"
          :headers="{'Authorization':token}"
          name="file"
          :show-file-list="false"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="success"
          :limit="99999"
          :before-upload="onBeforeUpload"
          style="float: left;margin-left: 10px"
          :on-exceed="handleExceed">

          <el-button size="small" icon="el-icon-upload2" type="primary" v-if="form.time === null" disabled>点击上传工资</el-button>
          <el-button size="small" icon="el-icon-upload2" type="primary" v-else>点击上传工资</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-table
      :data="wage"
      stripe
      border
      empty-text="0.0"
      style="width: 100%;margin-top: 10px">
      <el-table-column
        label="日期"
        width="100"
        align="center"
        :formatter="dateFormat"
        prop="time">
      </el-table-column>
      <el-table-column
        label="姓名"
        width="140"
        align="center"
        prop="姓名">
      </el-table-column>
      <el-table-column
        label="身份证号"
        width="180"
        align="center"
        prop="身份证号">
      </el-table-column>
      <el-table-column
        v-for="item in tableTitle"
        :label="item.label"
        :formatter="statusFormat"
        width="140"
        align="center"
        :prop="item.prop">
      </el-table-column>
      <el-table-column
        label="应发工资"
        width="140"
        align="center"
        prop="应发工资">
      </el-table-column>
      <el-table-column
        label="实发工资"
        width="140"
        align="center"
        prop="实发工资">
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        width="130"
        label="操作">
        <template slot-scope="scope">
          <el-button round
                     @click="handleCheck(scope.$index, scope.row)" plain size="mini">详 情
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin: 10px"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
    <el-dialog :title="title+'工资详情'" @close='closeDialog' :visible.sync="showWageMsg" width="1000px" top="40px" >
      <div style="width: 100%;height: 500px;overflow-y: auto;overflow-x: hidden;text-align: center;padding: 10px">
        <statistics id="expenditure" title="应发工资" :item-list="expenditureList" :item-list-msg="expenditureMsgList" style="width: 50%;float: left"></statistics>
        <statistics id="income" title="代扣代缴"  :item-list="incomeList" :item-list-msg="incomeListMsg" style="width: 50%;float: left"></statistics>
        <h2>应发工资</h2>
        <el-table
          :data="itemList"
          stripe
          border
          style="width: 100%;">
          <el-table-column
            v-for="item in expenditureList"
            :formatter="statusFormat"
            :label="item"
            align="center"
            :prop="item">
          </el-table-column>
        </el-table>
        <h2>代扣代缴</h2>
        <el-table
          :data="itemList"
          stripe
          border
          style="width: 100%;">
          <el-table-column
            v-for="item in incomeList"
            :formatter="statusFormat"
            :label="item"
            align="center"
            :prop="item">
          </el-table-column>
        </el-table>
      </div>

    </el-dialog>
  </div>

</template>

<script>
    import moment from 'moment'
  import statistics from '../../components/statistics'
  import wageMsg from "../../utils/wageMsg";
  import {payList,findByIncome} from "../../axios/api"
    export default {
        name: "wage",
        components:{
            statistics
        },
        data(){
            return{
                title:"",
                form:{
                    time:0,
                    name:""
                },
                total:1000,
                token:localStorage.getItem('token'),
                showWageMsg:false,
                wage:[],
                tableTitle:[],
                expenditureList:[],
                expenditureMsgList:wageMsg.expenditureMsgList,
                incomeList:[],
                incomeListMsg:wageMsg.incomeListMsg,
                itemMsg:{},
                itemList:[],
                page:1,
                loading:null
            }
        },
        mounted() {
            let myDate = new Date();
            this.form.time = this.computeTime(myDate.getFullYear(),myDate.getMonth()+1)
            this.getTitleType();
        },
        methods:{
            statusFormat: function(row, column) {
                if (row[column.label] === undefined || row[column.label] === ""){
                    return "0.0";
                }else{
                    return row[column.label];
                }
            },
            getMSG:async function(page,limit,time,idCard){
                let data = {
                    page:page,
                    limit:limit,
                    time:time,
                    id_card: idCard
                };
                let res = await payList(data);
                if (res.code === 0){
                    let wages = [];
                    res.data.list.forEach(function (data,i,a) {
                        let item = eval('(' +data.salaryData+ ')');
                        item["time"] = parseInt(data.time);
                        wages.push(item)
                    });
                    this.wage = wages;
                    this.total = res.data.totalCount;
                }
            },
            getTitleType:async function(){
              let res = await findByIncome();
              if (res.code === 0){
                  let than = this;
                  res.data.forEach(function (data,i,a) {
                      than.tableTitle.push({label:data.title,prop:data.title})
                      if (data.isIncome){
                          than.expenditureList.push(data.title);
                      }else{
                          than.incomeList.push(data.title);
                      }
                  });
                  this.getMSG(1,10,this.form.time,this.form.name);
              }
            },
            dateFormat:function(row, column) {
                var date = row.time;
                if (date == undefined) {
                    return "";
                }
                return moment(parseInt(date)).format("YYYY-MM");
            },
            handleCurrentChange(index){
              this.page = index;
              this.getMSG(this.page,10,this.form.time,this.form.name);
            },
            selectMsg(){
                this.page = 1;
                this.getMSG(1,10,this.form.time,this.form.name);
            },
            closeDialog(){
                this.itemMsg = {};
                this.itemList = [];
            },
            handleCheck(index,row){
                this.title = row.姓名
                this.itemMsg = row;
                this.itemList.push(row)
                let than = this;
                let exList = []
                this.expenditureList.forEach(function (data,i,a) {
                    exList.push({value:parseInt(than.itemMsg[data]),name:data})
                });
                this.expenditureMsgList = exList;

                let inList = [];
                this.incomeList.forEach(function (data,i,a) {
                    inList.push({value:parseInt(than.itemMsg[data]),name:data})
                });
                this.incomeListMsg = inList;
                this.showWageMsg = true
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            success(res){
                this.loading.close();
                if (res.code === 0){
                    this.alert("success","上传成功");
                    this.getMSG(1,10,this.form.time,this.form.name);
                }
            },
            onBeforeUpload(file)
            {
                const isLt1M = file.size / 1024 / 1024 < 1;
                //将身份证条件清空
                this.form.name = "";
                if (!isLt1M) {
                    this.$message.error('上传文件大小不能超过 1MB!');
                    return isLt1M;
                }
                this.loading = this.showLoadingDialog("上传中...");
                return isLt1M;
            },
        }

    }
</script>

<style scoped>

</style>
